{% extends '@AdsPlace/adlayout.twig' %}
{% block body %}
    <div style="position:absolute;vertical-align: top; right:0px; top:0px; z-index:999; width:24px; height:16px; background:#ccc; opacity:0.5 ">
        <a style="vertical-align: top;">  <svg style="width:22px;height:15px; display:inline-block;fill: #00aecd;" class="adname" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 16">
       <path d="M10.90 4.69L10.90 5.57L3.17 5.57L3.17 7.22L3.17 7.22Q3.17 9.15 3.06 10.11L3.06 10.11L3.06 10.11Q2.95 11.07 2.58 11.92L2.58 11.92L2.58 11.92Q2.21 12.77 1.27 13.56L1.27 13.56L0.59 12.93L0.59 12.93Q2.29 11.82 2.29 8.66L2.29 8.66L2.29 4.69L6.11 4.69L6.11 2.95L7.00 2.95L7.00 4.69L10.90 4.69ZM23.00 7.34L23.00 8.22L12.80 8.22L12.80 7.34L17.55 7.34L17.55 5.53L15.12 5.53L15.12 5.53Q14.55 6.53 13.86 7.07L13.86 7.07L13.10 6.46L13.10 6.46Q14.44 5.46 14.95 3.33L14.95 3.33L15.84 3.55L15.84 3.55Q15.77 3.86 15.49 4.65L15.49 4.65L17.55 4.65L17.55 2.84L18.47 2.84L18.47 4.65L21.86 4.65L21.86 5.53L18.47 5.53L18.47 7.34L23.00 7.34ZM21.45 8.88L21.45 13.63L20.53 13.63L20.53 12.78L15.32 12.78L15.32 13.63L14.41 13.63L14.41 8.88L21.45 8.88ZM15.32 11.90L20.53 11.90L20.53 9.76L15.32 9.76L15.32 11.90Z"></path></svg>
        </a>
        <!--<a style="display:none;">
         <svg style="width:15px;height:15px; display:inline-block;fill: #00aecd;stroke: #00aecd; stroke-width: 1.25;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 15 15"><path d="M3.25,3.25l8.5,8.5M11.75,3.25l-8.5,8.5"></path></svg>
        </a>-->
    </div>
    <div  id="AdElement" v-cloak class="viewbox">
        
        <preview-medias-screen
         v-bind:trackerclick="trackContentInteraction"   
         v-on:initstyle="InitSyle"  
         v-bind:medias-id="mediasId"></preview-medias-screen>
    </div>
{% endblock %}

 {% block pagejs %}
 <script>
  var ctarget = {
      options:{  customUrl:"{{ referer }}",
        impContentName:"{{ impContentName }}",
        impContentPiece:"{{ impContentPiece }}",
        impContentTarget:"{{ impContentTarget }}",
        caculateMethod:"{{caculateMethod}}",
        perPrice:"{{perPrice}}",
        parentContainer : "{{cs}}",
        disabled: "{{disabled}}", /*==2的时候广告才会显示*/

        intContentName:"{{ intContentName }}",
        intConentPiece:"{{ intConentPiece }}",
        intContentTarget:"{{ intContentTarget }}",
        trackerServer : "{{ tracker_server_url }}/matomo.php",
        trackerServerJs: "{{ tracker_server_url }}/matomo.js",
        trackerSiteId : "{{ trackerSiteId }}"
    }
  };
  /**js统计的js 插入script标签加载成功后回调 */
    var _paq = window._paq = window._paq || [];  
     /* _paq.push(['setTrackerUrl', ctarget.trackerServer ]);
     // _paq.push(['setSiteId', '49']);*/
        
    ctarget.script_onload = function () {
        /*计算 cpd 和cpm方式，在本地统计展示次数和记录当日展示*/
         if(ctarget.options.disabled !=2){
              window.parent.postMessage({container: ctarget.options.parentContainer,disabled:ctarget.options.disabled }, '*');
              return false;
          }
        /*统计服务器的地址*/          
      
        ctarget.tracker = Matomo.getTracker(ctarget.options.trackerServer , ctarget.options.trackerSiteId) ;
        //广告位所在页面的url
        ctarget.tracker.setCustomUrl( ctarget.options.customUrl);
        //tracker.trackPageView();
        //跟踪广告位某个计划投放的 展现量
        ctarget.tracker.trackContentImpression(ctarget.options.impContentName, ctarget.options.impContentPiece,  ctarget.options.impContentTarget);
       //跟踪广告位的物料展示量
        ctarget.tracker.trackContentImpression(ctarget.options.intContentName, ctarget.options.intConentPiece,  ctarget.options.intContentTarget);
        var vueapp = vueapp || window.vueapp;
        if(vueapp || window.vueapp){
            vueapp.ctarget = ctarget;
        }
       
    }
    ctarget.trackerClick =  function(){
        if(ctarget.options.disabled !=2){              
              return false;
          }
        /*跟踪广告位的 某个投放计划的物料 点击量*/            
       ctarget.tracker.trackContentInteraction('click',
                                    ctarget.options.intContentName, 
                                    ctarget.options.intConentPiece,
                                    ctarget.options.intContentTarget
                            );
        /*跟踪广告位的 某个广告位同时 也点击量*/
         ctarget.tracker.trackContentInteraction('click',
                                    ctarget.options.impContentName, 
                                    ctarget.options.impContentPiece,
                                    ctarget.options.impContentTarget
                            );
                    /* 记录点击一次统计一次电商转换*/
        if( ctarget.options.caculateMethod ==3){
           /* console.log(Math.random().toString(36).slice(2) + new Date().getTime())*/
            ctarget.tracker.addEcommerceItem(
                    'sku'+ ctarget.options.intConentPiece,
                    'n'+ctarget.options.impContentPiece,
                    'c'+ctarget.options.impContentName, parseFloat( ctarget.options.perPrice) );
                   
             ctarget.tracker.trackEcommerceOrder(Math.random().toString(36).slice(2) + new Date().getTime(), parseFloat( ctarget.options.perPrice));
        }
    }

    /**
     * 判断是否添加过tj的js 的script标签
     */
    var _all_script = document.getElementsByTagName('script');
    ctarget._has_script = false;
    if (_all_script.length){
        for (var i=0; i<   _all_script.length; i++){           
            if (_all_script[i].getAttribute("id") == encodeURIComponent(ctarget.options.customUrl) ){
                ctarget._has_script = true;
            }
        }
    }
    /**
     * 没有添加过则添加 
     */
    if (!ctarget._has_script){
        var d = document, g = d.createElement('script') ;
        g.type = 'text/javascript'; 
        //g.async = true;
        g.id = encodeURIComponent( ctarget.customUrl);
        g.src = ctarget.options.trackerServerJs;
        if (g.readyState) {
            g.onreadystatechange = function () {
                var state = this.readyState;
                if (state === 'loaded' || state === 'complete') {
                    g.onreadystatechange = null;




                    ctarget.script_onload();
                }
            };
        } else {
            g.onload = ctarget.script_onload;
        }
        d.getElementsByTagName('head')[0].appendChild(g);
        ctarget._has_script = true;     
    }
  </script>
    <script src="./plugins/AdsPlace/js/dist/main.js"></script> 
    <script>
    
  var vueapp = new Vue({
    el: '#AdElement',
    delimiters: ['${', '}'],
    data: function () {
        return {    
            mediasId : "{{ mediasId }}",   
            /*传递广告物料点击跳转链接后 先统计点击事件跟踪*/
            trackContentInteraction :  function(){
                ctarget.trackerClick();
            }
            
        }  
    } ,
    methods:{
        InitSyle: function( medias){
           // console.log(medias)
            medias.container = ctarget.options.parentContainer;
            medias.disabled = ctarget.options.disabled;
            //if(medias.type == 'html' && medias.cntype==2){
                //富媒体的 浮窗广告 
                window.parent.postMessage(medias, '*');
            //}
            /*let container = window.parent.getElementById(ctarget.options.parentContainer)
            container.style.position="fixed";
            container.style.width = width+ "px";
            container.style.height = height+"px"; 
            container.style.right = "2px";
            container.style.top = "50%";
            container.style.marginTop = "-" + (height /2)+ "px";*/
        }
    }
})
  </script>
 {%endblock%}